<!--
 * @Description: 收件人设置
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-07-27 10:21:44
 * @LastEditTime: 2021-09-02 20:04:03
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="page-content">
    <div class="info">
      <!-- 收件人设置 -->
      <h1 class="title">收件人设置</h1>
      <el-form :model="form" class="form" ref="ruleForm" label-width="80px" label-position="right">
        <el-form-item label="发送通知" prop="notice">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-switch
              :disabled="!isEdit"
              v-model="form.notice"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="checkNotice"
            ></el-switch>
          </el-col>
        </el-form-item>
        <template v-if="form.notice">
          <el-form-item
            label="通知周期"
            prop="period"
            :rules="[{ required: true, message: '请选择周期', trigger: 'change' }]"
          >
            <el-col :xs="24" :sm="12" :lg="6">
              <el-select
                v-model="form.period"
                placeholder="请选择周期"
                style="width: 100%"
                :disabled="!isEdit"
              >
                <el-option :value="0" label="10分钟"></el-option>
                <el-option :value="1" label="1小时"></el-option>
                <el-option :value="2" label="4小时"></el-option>
                <el-option :value="3" label="1天"></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item
            v-for="(receive, index) in form.receives"
            :label="'收件人' + (index + 1)"
            :key="receive.key"
            :prop="'receives.' + index + '.email'"
            :rules="[
                { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
              ]"
          >
            <el-col :xs="24" :sm="12" :lg="6">
              <el-row :gutter="20">
                <el-col :span="20">
                  <el-input v-model="receive.email" :disabled="!isEdit" />
                </el-col>
                <el-col :span="4">
                  <el-button
                    v-if="index !== 0"
                    @click.prevent="removeEmail(receive)"
                    :disabled="!isEdit"
                  >删除</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button v-show="form.notice" @click="addEmail" :disabled="!isEdit">+ 收件人</el-button>
          <!-- 保存-->
          <el-button type="primary" style="width: 90px" @click="save">{{isEdit ? '保存' : '编辑'}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isEdit: false,
      form: {
        // 发送通知
        notice: false,
        // 收件人
        receives: [{
          email: ''
        }],
        // 周期
        period: null
      }
    };
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.getReceive();
    });
  },
  methods: {
    // 切换状态
    checkNotice () {
      let _this = this;
      if (_this.form.notice) {
        if (_this.form.receives.length === 0) {
          _this.form.receives.push({
            email: ''
          });
        }
      }
    },
    // 删除
    removeEmail (item) {
      let index = this.form.receives.indexOf(item);
      if (index !== -1) {
        this.form.receives.splice(index, 1);
      }
    },
    // 添加
    addEmail () {
      this.form.receives.push({
        email: '',
        key: Date.now()
      });
    },
    // 判断重复
    isRepeat (arr) {
      let hash = {};
      // eslint-disable-next-line guard-for-in
      for (let i in arr) {
        if (hash[arr[i]]) {
          return true;
        }
        hash[arr[i]] = true;
      }
      return false;
    },
    // 初始化表单
    getReceive () {
      let _this = this;
      _this.$http.get({
        url: '/api/sdwan/accept/email/' + _this.$store.state.user.user.info.dgId
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          if (resultBody) {
            let emails = resultBody.acceptEmail ? resultBody.acceptEmail.split(',') : [];
            let arry = [];
            for (let i = 0; i < emails.length; i++) {
              arry.push({
                email: emails[i]
              });
            }
            _this.form = {
              id: resultBody.id,
              // 发送通知
              notice: resultBody.alarm,
              // 收件人
              receives: arry,
              // 周期
              period: resultBody.period
            };
          } else {
            _this.form = {
              // 发送通知
              notice: false,
              // 收件人
              receives: [{
                email: ''
              }],
              // 周期
              period: null
            };
          }
        }
      });
    },
    // 保存&编辑
    save () {
      let _this = this;
      if (_this.isEdit) {
        _this.$refs['ruleForm'].validate(valid => {
          if (valid) {
            let params = {
              dgId: _this.$store.state.user.user.info.dgId,
              alarm: _this.form.notice
            };
            let arry = [];
            _this.form.receives.map(item => {
              arry.push(item.email);
            });
            if (_this.form.notice) {
              params.acceptEmail = arry.join(',');
              params.period = _this.form.period;
            }
            if (_this.form.id) {
              params.id = _this.form.id;
            }
            if (_this.isRepeat(arry)) {
              _this.$message.error('收件人重复！');
            } else {
              _this.$http.post({
                url: _this.form.id ? '/api/sdwan/accept/email/update' : '/api/sdwan/accept/email/create',
                data: params
              }).then(res => {
                let { status } = res;
                if (status === '0') {
                  _this.isEdit = false;
                  _this.getReceive();
                  _this.$message.success('更新成功！');
                }
              });
            }
          } else {
            _this.$message.error('请检查必填项！');
          }
        });
      } else {
        _this.isEdit = true;
      }
    }
  }
};
</script>
<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;

  .header {
    background: #fff;
    padding: 30px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .left-wrap {
      .avatar {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
      }

      h2 {
        font-size: 30px;
        margin-top: 20px;
        font-weight: 500;
      }

      p {
        color: #9ca3ae;
        font-size: 14px;
        margin-top: 20px;
        display: none;
      }

      .task {
        margin-top: 30px;
        display: flex;
        align-items: center;

        span {
          color: #9ca3ae;
          font-size: 14px;
          margin-right: 30px;
          margin-left: 8px;
        }
      }
    }

    .right-wrap {
      display: flex;
      align-items: center;

      img {
        width: 230px;
      }
    }
  }

  .info {
    background: #fff;

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    .form {
      padding: 30px 40px;
      box-sizing: border-box;
    }
  }
}

@media only screen and (max-width: $device-ipad) {
  .page-content {
    .header {
      padding: 20px 20px;

      .left-wrap {
        .avatar {
          width: 90px;
          height: 90px;
        }

        h2 {
          font-size: 20px;
          margin-top: 20px;
        }

        .task {
          margin-top: 15px;

          .icon {
            width: 2.8em;
            height: 2.8em;
            vertical-align: -0.15em;
          }

          span {
            font-size: 15px;
          }
        }
      }

      .right-wrap {
        display: flex;
        align-items: center;

        img {
          display: none;
        }
      }
    }

    .info {
      .title {
        font-size: 18px;
        padding: 15px 20px;
      }

      .form {
        padding: 30px 20px;
      }
    }
  }
}
</style>